<template>
  <div>
    <mu-tabs inverse>
      <mu-tab>列表配置</mu-tab>
    </mu-tabs>
    <div>
      <Draggable class="flex-start flex-wrap" v-model="insideValue" @update="update">
        <div class="flrc bdda padr20" v-for="(row,index) in insideValue" :key="row.name">
          <div style="width: 120px;" class="tar fwb">{{ row.title }}:</div>
          <div style="width: 300px;" class="tac">
            <mu-radio v-model="row.align" @change="v=>setV(index,'align',v)" class="marl5" label="左对齐"
                      value="left"></mu-radio>
            <mu-radio v-model="row.align" @change="v=>setV(index,'align',v)" class="marl5" label="居中对齐"
                      value="center"></mu-radio>
            <mu-radio v-model="row.align" @change="v=>setV(index,'align',v)" class="marl5" label="右对齐"
                      value="right"></mu-radio>
          </div>
          <div style="width: 150px;" class="tac padt5">
            <mu-text-field @focus="$event.target.select()" style="width: 130px;" type="number"
                           @change="v=>setV(index,'width',v*1)"
                           :value="row.width">
              <mu-button small icon slot="prepend" @click="red(row.name)">
                <mu-icon value="remove_circle"></mu-icon>
              </mu-button>
              <mu-button small icon slot="append" @click="add(row.name)">
                <mu-icon value="add_circle"></mu-icon>
              </mu-button>
            </mu-text-field>
          </div>
          <div class=" padl10 padr10">
            <mu-button icon @click="moveLeft(index)">
              <mu-icon value="first_page"></mu-icon>
            </mu-button>
            <mu-button icon @click="moveRight(index)">
              <mu-icon value="last_page"></mu-icon>
            </mu-button>
          </div>
          <div>
            <mu-switch @change="v=>setV(index,'show',v)" v-model="row.show" label="显示"></mu-switch>
          </div>
          <div class="flex1"></div>
        </div>
      </Draggable>
    </div>
    <div class="pad20 bdtso mart20">
      <mu-button class="marr10" color="primary" @click="restData">重置数据</mu-button>
      <mu-button class="marr10" color="primary" @click="clearCache">清理缓存</mu-button>
    </div>
  </div>

</template>

<script>
import Draggable from "vuedraggable";

export default {
  name: "EzTableHeaderManager",
  components: {
    Draggable
  },
  props: {
    value: [],
    org: [],
    cached: {
      type: Boolean,
      default() {
        return false
      }
    },
    cacheKey: {
      type: String,
      default: ""
    }
  },
  data() {
    return {
      insideValue: [],
      curTab: "main",
    }
  },
  methods: {
    add(rowName) {
      for (let index in this.insideValue) {
        let row = this.insideValue[index]
        if (row.name === rowName) {
          this.setV(index, "width", this.insideValue[index].width + 10)
        }
      }

    },
    red(rowName) {
      for (let index in this.insideValue) {
        let row = this.insideValue[index]
        if (row.name === rowName) {
          let v = this.insideValue[index].width - 10
          if (v < 0) v = 0
          this.setV(index, "width", v)
        }
      }
    },
    setV(index, name, v) {
      this.insideValue[index][name] = v
      this.update(true)
    },
    moveLeft(index) {
      let cur = this.insideValue.splice(index, 1)
      this.insideValue.unshift(cur[0])
      this.update(true)
    },
    moveRight(index) {
      let cur = this.insideValue.splice(index, 1)
      this.insideValue.push(cur[0])
      this.update(true)
    },
    update(save) {
      let v = []
      for (let index in this.insideValue) {
        let item = this.insideValue[index]
        if (item.show) {
          v.push(item)
        }
      }

      this.$emit("change", Math.random(), v)
      //保存缓存
      if (save){
        this.setUcache(this.insideValue)
      }
    },
    clearCache() {
      this.setUcache("")
      this.update()
    },
    restData() {
      this.insideValue = this.org
      this.update(true)
    },
    setUcache(cacheData) {
      this.$http.post("/api/uc/_uc_set", {
        key: this.cacheKey, data: {
          config: cacheData
        }
      }, res => {
      })
    },
    getUcache() {
      this.$http.post("/api/uc/_uc_get", {key: this.cacheKey}, res => {
        if (res.data && res.data.config){
          this.insideValue = res.data.config
          this.update()
        }
      })
    },
  },
  mounted() {
    for (let item of this.org) {
      if (item.show === undefined) {
        item.show = true
      }
      if (item.type === "selection") {
        item.title = "选择"
      }
      this.insideValue.push(item)
    }
    if (this.cached) {
      this.getUcache()
    }
  },
  watch: {}
}
</script>

<style scoped>

</style>